<template>
  <div>
    <div class="aside">
      <el-menu
        text-color="#fff"
        active-text-color="#7DE9FF"
        default-active="1"
        :collapse-transition="false"
        class="el-menu-vertical-demo font-20 fontW-b font-f-ib"
        :collapse="isCollapse"
        @open="handleOpen"
        @select="hundleSelect"
        @close="handleClose">
        <!-- 一级菜单 -->
        <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
          <!-- 一级菜单的模板区域 -->
          <template slot="title">
            <div class="font-f-iR  flex-s-between" >
              <div>
                <img class="mgr-5" src="../../assets/icon/evtype.svg" alt="" v-if="item.niuID!=1">
                <!-- 文本 -->
                <span class="theme-color font-16 fontW-7">{{$t('sideba.'+ item.authName)}}</span>
              </div>
              <div class="font-10 fontW-4 mgr-20 "  v-if="item.niuID!=1">44{{item.niuID}}</div>
            </div>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item :index="sunItem.id + ''" v-for="sunItem in item.children" :key="sunItem.id">
            <template slot="title">
              <!-- 二级菜单的模板区域 -->
              <!-- 图标 -->
              <label class="font-10 fontW-4 font-f-iR flex-s-between sunItemlabel" style="width:100%" >
                <div class="">
                  <el-checkbox  class="mgb-5" ></el-checkbox>
                  <span>{{sunItem.authName}}</span>
                </div>
                <div>44</div>
              </label>
              <!-- 文本 -->
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: 'asideItem',
  props: {
    menuList: {
      type: Array,
      default: () => []
    },
    isCollapse: {
      type: Boolean,
      default: () => false
    },
    AsideType: Number

  },
  data () {
    return {
    }
  },
  mounted () {
    // console.log(this.menuList, this.isCollapse)
    console.log(this.AsideType, '111111111111111111')
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath, 'handleOpen', JSON.stringify(key))
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath, 'handleClose', JSON.stringify(key))
    },
    hundleSelect: function (key, keyPath) {
      console.log(key, keyPath, 'hundleSelect', JSON.stringify(key))
    }
  }
}
</script>
<style lang="less" scoped>
.aside {
  width: 100%;
  height: auto;
  /deep/.el-menu {
    background: none;
    /deep/.el-submenu__title {
      color: none;
    }
    /deep/.el-submenu__title:hover {
    background: none;
  }
    /deep/.el-submenu:hover {
      background: none;
    }
  }
  /deep/.el-checkbox__inner {
  width: 10px;
  height: 10px;
}
  /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
    background: #7DE9FF;
    border-color: #7DE9FF;
  }
  /deep/.el-checkbox__inner::after{
    border: none;
  }
  /deep/.el-menu-item.is-active {
    color: #fff !important;;
  }
  /deep/.el-menu-item,.sunItemlabel{
    height: 35px !important;
    line-height: 35px !important;
  }
  /deep/.el-submenu .el-menu{
    max-height: 150px !important;
    overflow: scroll !important;
    background: #898989 !important;
    border-radius: 5px !important;
    margin-right: 5px !important;
  }
  /deep/.el-submenu__icon-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -10px;
    font-size: 20px;
  }
}
</style>
<style>
.el-menu--vertical .el-menu{
  background: #585858;
}

</style>
